<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章分类</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.exedit.js"></script>
</head>
<body>
    <div>
        <ul id="zTreeDemo" class="ztree" style="margin-top: 20px;margin-left: 40px"></ul>
        <div style="position: absolute;left: 345px;top: 400px;" >
            <input id="determine" type="button" value="确定" onclick="determine()" style="background-color: #1E9FFF; color:#FFFFFF;height: 32px; width: 63px; border: 1px #DEDEDE solid;"/>
            <input id="cancel" type="button" value="取消" onclick="cancel()" style="background-color: #FFFFFF; color: black; border: 1px #DEDEDE solid;height: 32px; width: 63px;"/>
        </div>
    </div>

</body>
    <script>
        layui.use(["layer","jquery"],function () {
            var layer = layui.layer,
                $ = layui.jquery;
            var setting = {
                data:{
                    simpleData: {
                        enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                        idKey: "acticleCategroyId",  //节点数据中保存唯一标识的属性名称
                        pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称
                        rootPId: -1,  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                        simpleData: {
                            enable: true
                        }
                    },
                    key: {
                        name: "artcleCategroyName"
                    }
                },
                view: {
                    dblClickExpand :false,
                    selectedMulti: false
                },
                check:{
                    enable : true,
                    chkboxType : { "Y" : "", "N" : "" },
                    chkStyle: 'checkbox'
                },
                callback: {
                    beforeCheck : function(treeId, treeNode) {
                        var zTree = $.fn.zTree.getZTreeObj(treeId);
                        zTree.checkAllNodes(false);
                        return true;
                    }
                }
            };

            var zTree;
            zTreeFunction();

            function zTreeFunction(){
                $("document").ready(function () {
                    $.ajax({
                        url:"/JsActicleCategroy/getAllJsActicleCategroy",
                        data:{},
                        type:'post',
                        dataType:'json',
                        success:function (data) {
                            zTree = $.fn.zTree.init($("#zTreeDemo"), setting, data.data);//初始化树
                            zTree.expandAll(true);    //true 节点全部展开、false节点收缩

                        }
                    })
                })
            }


            determine = function determine() {
                var zTreeObj = $.fn.zTree.getZTreeObj("zTreeDemo");
                var nodes = zTreeObj.getCheckedNodes(true);
                var acticleCategroyId = 0;
                var artcleCategroyName = "";
                for (var i=0; i<nodes.length ; i++ ){
                    acticleCategroyId = nodes[i].acticleCategroyId;
                    artcleCategroyName += nodes[i].artcleCategroyName;
                }
                parent.$("#acticleCategroyId").val(acticleCategroyId);
                parent.$("#artcleCategroyName").val(artcleCategroyName);
                var layer = parent.layer;
                layer.close(layer.index);
            }
            cancel = function cancel() {
                var layer = parent.layer;
                layer.close(layer.index);
            }
        })
    </script>
</html>